<!--
    * Time    : 2020-12-28 14:43:58
    * Author  : zhangTj
    * Desc    : 余额充值页面
-->

<template>
    <div class="w750 bg-fff">
        <div class="d-flex flex-column bg-fff">
            <div v-if="resultData.posterImgPath">
                <img :src="$imgUrlHead + resultData.posterImgPath" class="w-100 h-100" alt="" />
            </div>
            <div class="flex-1 overflow-y p-1">
                <div class="d-flex j-sb a-center">
                    <h1 class="font-16">充值金额</h1>
                </div>
                <div>
                    <div class="mt-1 grid-column2 grid-rc-10">
                        <div
                            @click="choose(index)"
                            v-for="(item, index) in list"
                            :key="index"
                            :class="{ active: index == activeIndex }"
                            class="border-box text-center d-flex flex-column font-12 bg-fff rounded-5 p-1 border border-main"
                        >
                            <span>
                                <span class="font-18 mt-05" :style="{ color: index == activeIndex ? '#fff' : 'var(--themescolor)' }">
                                    {{ item.rechargeMoney || 0 }}元
                                </span>
                            </span>
                            <span class="opacity-5" :style="{ color: index == activeIndex ? '#fff' : 'var(--themescolor)' }">充值金额</span>
                        </div>
                    </div>
                    <div class="mt-3" v-if="showcustomMoney">
                        <span>自定义金额</span>
                        <div class="mt-15p bg-f8">
                            <input
                                type="number"
                                :oninput="$inputMoney"
                                oninput="if(value.length>9) value=value.slice(0,9)"
                                class="w-100 bg-f8 p-15p font-14"
                                placeholder="请输入充值金额"
                                maxlength="10"
                                v-focus
                                @click="customMoney"
                                @keyup.enter="finishMoney"
                                v-model="money"
                            />
                        </div>
                    </div>
                </div>
            </div>
            <div class="bg-fff">
                <div @click="recharge" class="text-fff py-1 rounded-20 text-center m-2 bg-main">
                    <span>立即充值</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { predepositRechargePage, predepositcreateRechargeOrder } from '@/api/balance.js'
import pay from 'service/pay'

export default {
    name: '',
    components: {},
    data() {
        return {
            money: '', // 自定义金额
            activeIndex: 0, // 激活的item
            list: [],
            richText: '', // 充值富文本内容
            showcustomMoney: false, // 是否显示自定义充值
            resultData: {} // 原始数据
        }
    },
    directives: {
        // 自动获取焦点
        focus: {
            inserted: function (el) {
                el.focus()
            }
        }
    },
    computed: {
        amount() {
            return /^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0\.\d{1,2}$/.test(this.money)
        }
    },
    watch: {},
    created() {},
    destroyed() {},
    mounted() {
        this.getList()
    },
    methods: {
        // 获取列表数据
        getList() {
            predepositRechargePage()
                .then((res) => {
                    this.resultData = res.result
                    this.list = res.result.rechargeMoneys
                    this.showcustomMoney = res.result.enableCustom
                })
                .catch((err) => {
                })
        },

        // 充值
        recharge() {
			if (this.activeIndex == -1) {
			    if (!this.money) {
			        this.$toast('请输入金额~')
			        return
			    }
			    if (!this.amount) {
			        this.$toast('请输入正确的金额~')
			        return
			    }
			    // 自定义充值限制
			    if (this.money < this.resultData.minRechargeMoney) {
			        this.$toast(`单笔充值最低限制${this.resultData.minRechargeMoney}元`)
			        return
			    }
			} else {
			    // 最低限制
			    if (this.resultData.minRechargeMoney) {
			        if (this.list[this.activeIndex].rechargeMoney < this.resultData.minRechargeMoney) {
			            this.$toast(`单笔充值最低限制${this.resultData.minRechargeMoney}元`)
			            return
			        }
			    }
			}
			// 最高限制
			if (this.resultData.maxRechargeMoney != 0) {
			    if (
			        (this.activeIndex == -1 && this.money > this.resultData.maxRechargeMoney) ||
			        (this.activeIndex != -1 && this.list[this.activeIndex].rechargeMoney > this.resultData.maxRechargeMoney)
			    ) {
			        this.$toast(`单笔充值最高限制${this.resultData.maxRechargeMoney}元`)
			        return
			    }
			}
            this.$utils.uDebounce(() => {
				predepositcreateRechargeOrder({
				    customize: this.activeIndex == -1 ? true : false,
				    rechargeGiftpackId: '', // 充值礼包Id, 暂时不用传
				    rechargeMoney: this.activeIndex == -1 ? this.money : this.list[this.activeIndex].rechargeMoney
				})
				    .then((res) => {
				        if (!res.success) {
				            this.$toast(res.msg)
				        }
				        pay.pay('USER_RECHARGE', res.result.rechargeNumber)
				    })
				    .catch((err) => {
				    })
			})
        },

        // 自定义金额充值
        customMoney() {
            this.activeIndex = -1
        },

        // 点击键盘完成/前往 收起软键盘
        finishMoney() {
            this.$refs.customInput.blur()
        },

        // 激活
        choose(index) {
            this.activeIndex = index
        }
    }
}
</script>

<style scope>
.active {
    background: var(--themescolor) !important;
    padding: 10px;
}

.activeInput {
    border: 1px solid var(--themescolor);
    color: var(--themescolor) !important;
    padding: 19px;
}
</style>
